<template>
<<<<<<< HEAD
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="质检组" prop="groupId">
        <el-select
          v-model="queryParams.groupId"
          placeholder="质检组"
          clearable
          style="width: 240px"
          @change="changeGroup($event)"
        >
          <el-option
            v-for="g in groupList"
            :key="g.id"
            :label="g.groupName"
            :value="g.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
=======
  <div>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="质检组" prop="groupId">
          <el-select
            v-model="queryParams.groupId"
            placeholder="质检组"
            clearable
            style="width: 240px"
            @change="changeGroup($event)"
          >
            <el-option
              v-for="g in groupList"
              :key="g.id"
              :label="g.groupName"
              :value="g.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div  class="app-container">
      <el-button @click="download">下载</el-button>
    </div>
    <div id="download" v-loading="loading" class="parent" v-if="isReload">
      <div class="block" v-for="(item,index) in result" :key="index"  >
        <div class="main" style="height:300px;width:350px" ></div>
      </div>
    </div>
>>>>>>> cb5d20c5ca3c00db9e2bb299fba451949c31f647
  </div>
</template>

<script>


import {all} from "@/api/business/group/group";
import {statistics} from "@/api/business/statistics/statistics";
<<<<<<< HEAD
=======
import * as echarts from 'echarts';
import html2canvas from "html2canvas"
>>>>>>> cb5d20c5ca3c00db9e2bb299fba451949c31f647

export default {
  name: "Statistics",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 分组列表
      groupList: [],
      result: {},
      queryParams: {
        groupId: null
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
<<<<<<< HEAD
=======
    // 将echarts图表转换为canvas,并将canvas下载为图片
    download() {
      // 图表转换成canvas
      html2canvas(document.getElementById("download")).then(function (canvas) {
        var img = canvas
          .toDataURL("image/png")
          .replace("image/png", "image/octet-stream");
        // 创建a标签，实现下载
        var creatIMg = document.createElement("a");
        creatIMg.download = "图表.png"; // 设置下载的文件名，
        creatIMg.href = img; // 下载url
        document.body.appendChild(creatIMg);
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
      });
    },
    drawRose(){
      let element = document.getElementsByClassName('main');
      console.log(element);
      console.log(this.result);
      for (var i = 0; i < this.result.length; i++) {
        var myChart = echarts.init(element[i]);
        // 填入数据
        myChart.setOption({
          title: {
            text: this.result[i].title,
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '10%',
            left: 'center'
          },
          series: [
            {
              // 根据名字对应到相应的系列
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.result[i].values
            }
          ]
        });

      }
    },
>>>>>>> cb5d20c5ca3c00db9e2bb299fba451949c31f647
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      all().then(response => {
        this.groupList = response.data;
        this.queryParams.groupId = this.groupList[0].id;
        statistics(this.queryParams).then(response => {
          this.result = response.data
          this.loading = false;
        })
      })

    },
    getGroupList(){
      all().then(response => {
        this.groupList = response.data;
        this.queryParams.groupId = this.groupList[0].id;
      })
    },
    statistics(){
      statistics(this.queryParams).then(response => {
        this.result = response.data
      })
    },
    changeGroup(val){
      this.queryParams.groupId = val;
      statistics(this.queryParams).then(response => {
        this.result = response.data
      })
    }
  }
};
</script>
